import React, { useEffect,useState} from 'react'
import './index.scss'
import { Switch } from 'antd';
import { useLocation, useSearchParams } from 'react-router-dom'; 
import { getConfiguration,updataConfig } from '../../api'; 
interface IConfig { 
  id: number,
  account: string,
  creator: string,
  vip: string,
  online: number,
  checkIn: string,
  fightCard: string,
  musician: number,
  cookie:string
}
export default function Control() {
  const location = useLocation()
  const [URLSearchParams] = useSearchParams(location.search)
  const [account] = useState(URLSearchParams.get('account'))
  const [config, setConfig] = useState<IConfig>()
  function getConfig() { 
    getConfiguration((account as string)).then(res => { 
      setConfig(res.data)
    })
  }
  //默认拉取用户配置
  useEffect(() => { 
    getConfig()
  }, [])
  //更新配置
  async function upDate(key:string,value:number) { 
    const result:any =  await updataConfig(key, !Boolean(value), (config?.account as string))
    if(result.data.code) getConfig()
  }
  return (
    <div className='control'>
      <div className='configuration'>
        音乐人任务<Switch onClick={()=>{upDate('musician',(config?.musician as number))}} checked={config?.musician?true:false } checkedChildren="开启" unCheckedChildren="关闭"></Switch>
      </div>
      <div className='configuration'>
          每日签到<Switch onClick={()=>{upDate('checkIn',(config?.checkIn as unknown as number))}} checked={config?.checkIn?true:false } checkedChildren="开启" unCheckedChildren="关闭"></Switch>
      </div>
      <div className='configuration'>
        每日打卡<Switch onClick={()=>{upDate('fightCard',(config?.fightCard as unknown as number))}} checked={config?.fightCard?true:false } checkedChildren="开启" unCheckedChildren="关闭"></Switch>
      </div>
    </div>
  )
}

